import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class ScoreDetail extends StatefulWidget {
  @override
  _ScoreDetailState createState() => _ScoreDetailState();
}

class _ScoreDetailState extends State<ScoreDetail> {
  bool isDetail = true; //是否选择分值明细
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: BackButton(
          color: Colors.white,
        ),
        backgroundColor: Colors.red,
        title: Text(
          '积分详情',
          style: TextStyle(
              color: Colors.white,
              fontSize: 30.sp,
              fontWeight: FontWeight.bold),
        ),
        centerTitle: true,
      ),
      body: CustomScrollView(
        physics: BouncingScrollPhysics(),
        slivers: [
          SliverToBoxAdapter(
            child: Stack(
              children: [
                Container(
                  height: 420.w,
                  decoration: BoxDecoration(color: Colors.red),
                  child: Column(
                    children: [
                      SizedBox(height:30.w),
                      Text(
                        '当前积分',
                        style: TextStyle(color: Colors.white, fontSize: 20.sp),
                      ),
                      SizedBox(
                        height: 5.w,
                      ),
                      Text(
                        "10.00",
                        style: TextStyle(color: Colors.white, fontSize: 50.sp),
                      ),
                      SizedBox(height: 25.w),
                      Container(
                        width: 50.w,
                        height: 3.w,
                        color: Colors.white,
                      ),
                      SizedBox(height: 35.w),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        children: [
                          Column(
                            children: [
                              Text(
                                '10',
                                style: TextStyle(
                                    color: Colors.white, fontSize: 35.sp),
                              ),
                              SizedBox(height: 10.w),
                              Text(
                                '累计积分',
                                style: TextStyle(
                                    color: Colors.white, fontSize: 20.sp),
                              ),
                            ],
                          ),
                          Column(
                            children: [
                              Text(
                                '0',
                                style: TextStyle(
                                    color: Colors.white, fontSize: 35.sp),
                              ),
                              SizedBox(height: 10.w),
                              Text(
                                '累计消费',
                                style: TextStyle(
                                    color: Colors.white, fontSize: 20.sp),
                              ),
                            ],
                          ),
                          Column(
                            children: [
                              Text(
                                '10',
                                style: TextStyle(
                                    color: Colors.white, fontSize: 35.sp),
                              ),
                              SizedBox(height: 10.w),
                              Text(
                                '今日获得',
                                style: TextStyle(
                                    color: Colors.white, fontSize: 20.sp),
                              ),
                            ],
                          ),
                        ],
                      )
                    ],
                  ),
                ),
                Positioned(
                  bottom: 0.w,
                  child: Container(
                    width: 700.w,
                    height: 100.w,
                    margin: EdgeInsets.only(left: 35.w),
                    decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.only(
                            topLeft: Radius.circular(20.w),
                            topRight: Radius.circular(20.w))),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        GestureDetector(
                          onTap: () {
                            setState(() {
                              isDetail = true;
                            });
                          },
                          child: ClipRRect(
                            borderRadius: BorderRadius.only(
                              topLeft: Radius.circular(20.w),
                            ),
                            child: Container(
                                color: Colors.white,
                                height: 100.w,
                                width: 350.w,
                                child: Container(
                                  child: Row(
                                    mainAxisAlignment: MainAxisAlignment.center,
                                    crossAxisAlignment: CrossAxisAlignment.center,
                                    children: [
                                      Icon(
                                        Icons.tab,
                                        color: isDetail
                                            ? Colors.red
                                            : Colors.grey,
                                        size: 40.sp,
                                      ),
                                      SizedBox(
                                        width: 15.w,
                                      ),
                                      Text(
                                        '分值明细',
                                        style: TextStyle(
                                            color: isDetail
                                                ? Colors.red
                                                : Colors.grey,
                                            fontWeight: FontWeight.bold,
                                            fontSize: 35.sp),
                                      )
                                    ],
                                  ),
                                )),
                          ),
                        ),
                        GestureDetector(
                          onTap: () {
                            setState(() {
                              isDetail = false;
                            });
                          },
                          child: ClipRRect(
                            borderRadius: BorderRadius.only(
                              topRight: Radius.circular(20.w),
                            ),
                            child: Container(
                              height: 100.w,
                              width: 350.w,
                              color: Colors.white,
                              child: Row(
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: [
                                  Icon(
                                    Icons.tab,
                                    color: isDetail == false
                                        ? Colors.red
                                        : Colors.grey,
                                    size: 40.sp,
                                  ),
                                  SizedBox(
                                    width: 15.w,
                                  ),
                                  Text(
                                    '分值提升',
                                    style: TextStyle(
                                        color: isDetail == false
                                            ? Colors.red
                                            : Colors.grey,
                                        fontWeight: FontWeight.bold,
                                        fontSize: 35.sp),
                                  )
                                ],
                              ),
                            ),
                          ),
                        )
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ),
          isDetail?SliverToBoxAdapter(
            child: Container(
              margin: EdgeInsets.symmetric(horizontal: 50.w),
              width: 700.w,
              padding: EdgeInsets.all(10.w),
              decoration: BoxDecoration(
                  color: Colors.orangeAccent[50],
                  borderRadius: BorderRadius.all(Radius.circular(25.w)),
                  border: Border.all(color: Colors.orange)),
              child: Row(
                children: [
                  Icon(
                    Icons.warning,
                    color: Colors.orange,
                  ),
                  SizedBox(
                    width: 20.w,
                  ),
                  Text(
                    '提示：积分数值的高低会直接影响您的会员等级',
                    style: TextStyle(color: Colors.orange),
                  )
                ],
              ),
            ),
          ):SliverToBoxAdapter(
            child: Text(''),
          ),
          isDetail?SliverToBoxAdapter(
            child:Container(
              margin: EdgeInsets.symmetric(horizontal: 35.w),
              child:  ListTile(
                title: Text('签到奖励'),
                subtitle: Text('2020/8/5 11:42'),
                trailing: Text(
                  '+10',
                  style: TextStyle(fontSize: 40.sp, color: Colors.red),
                ),
              ),
            ),
          ):SliverToBoxAdapter(
            child: Container(
              width: 700.w,
              alignment: Alignment.center,
              margin: EdgeInsets.symmetric(horizontal: 50.w),
              child: Column(
                children: [
                  Container(
                    height:120.w,
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                        gradient: LinearGradient(
                            colors: [

                              Colors.white,
                              Colors.orangeAccent[100],
                            ]
                        )
                    ),
                    child: ListTile(
                      leading: Icon(Icons.subject),
                      title: Text('购买商品可获得积分奖励'),
                      trailing: OutlineButton(
                        onPressed: (){},
                        child: Text("赚积分"),
                      ),
                    ),
                  ),
                  SizedBox(height:30.w),
                  Container(
                    height:120.w,
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                        gradient: LinearGradient(
                            colors: [
                              Colors.white,
                              Colors.orangeAccent[100],
                            ]
                        )
                    ),
                    child: ListTile(
                      leading: Icon(Icons.subject),
                      title: Text('每日签到可获得积分奖励'),
                      trailing: OutlineButton(
                        onPressed: (){},
                        child: Text("赚积分"),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
          SliverToBoxAdapter(
            child: Divider(),
          )
        ],
      ),
    );
  }
}
